<template>
  <div class="mod-prod-sku-table">
    <el-form-item>
      <el-table :data="value" border >
         <el-table-column header-align="center" align="center" label="操作" fixed="left" width="100" v-if="skuPropertiesList.length">
           <template slot-scope="scope">
             <el-button type="danger" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-if="scope.row.status">禁用</el-button>
             <el-button type="primary" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-else>启用</el-button>
           </template>
         </el-table-column>
        <el-table-column v-for="(pp, index) in skuPropertiesList" :key="index" :label="pp.specsName" header-align="center"
                align="center" fixed="left" width="140">
          <template slot-scope="scope"> {{scope.row.propertiesList[index].specsValue}} </template>
        </el-table-column>
        <el-table-column v-if="skuPropertiesList.length" prop="pic" label="sku图片" width="180" header-align="center" align="center">
          <template slot-scope="scope">
            <pic-upload v-model="scope.row.pic"></pic-upload>
          </template>
        </el-table-column>
        <el-table-column v-if="skuPropertiesList.length" prop="prodName" label="商品名称" min-width="200" header-align="center" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.prodName" type="textarea" :disabled="!scope.row.status" ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="销售价" min-width="160" header-align="center" align="center">
          <template slot-scope="scope">
             <el-input-number size="small" v-model="scope.row.price" :controls="false"
              :precision="2" :max="1000000000" :min="0.01" :disabled="!scope.row.status">
          </el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="oriPrice" label="市场价" min-width="160" header-align="center" align="center">
          <template slot-scope="scope">
            <el-input-number size="small" v-model="scope.row.oriPrice" :controls="false" :precision="2"
                    :max="1000000000" :min="0.01" :disabled="!scope.row.status" style="width: 130px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="stocks" label="库存" min-width="160" header-align="center" align="center">
          <template slot-scope="scope">
            <el-input-number size="small" :min="0" :controls="false" v-model="scope.row.stocks" type="number"
              :disabled="!scope.row.status" style="width: 130px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="商品重量(kg)" min-width="160" header-align="center" align="center">
          <template slot-scope="scope">
            <el-input-number :precision="2" :min="0" :controls="false" v-model="scope.row.weight"
              :disabled="!scope.row.status" style="width: 130px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="volume" label="商品体积(m³)" min-width="160" header-align="center" align="center">
          <template slot-scope="scope">
            <el-input-number :precision="2" :min="0" :controls="false" v-model="scope.row.volume"
              :disabled="!scope.row.status" style="width: 130px;"/>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </div>
</template>

<script>
  import PicUpload from '@/components/PicUpload';
  export default {
    components: {
      PicUpload
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        default: [],
        type: Array
      },
      skuPropertiesList: {
        default: []
      }
    },
    data () {
      return {
        dataList:[]
      }
    },
    computed:{
      defalutSku () {
        return this.$store.state.prod.defalutSku
      }
    },
    created(){
    },
    watch:{
      value:{
        handler(val, oldVal) {
          //this.$emit("change", this.skuPropertiesList, this.value)
          if(val&&val.length){
            this.dataList = val;
          }else{
            this.dataList = []
          }
          if(!this.dataList.length){
            let sku = JSON.parse(JSON.stringify(this.defalutSku));
            sku.skuName = "";
            this.dataList.push(sku);
            this.$emit("change", this.dataList)
          }
        },
        deep: true,
        immediate: true
      },
    },
    methods: {
      getSkuList () {
        return this.value
      },
      changeSkuStatus (index) {
        this.value[index].status = this.value[index].status ? 0 : 1
      }
    }
  }
</script>

<style lang="scss">

  .mod-prod-sku-table{
    .pic-uploader-component .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .pic-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
      }
      .pic {
        width: 120px;
        height: 120px;
        display: block;
      }
    }
    .pic-uploader-component .el-upload:hover {
      border-color: #409EFF;
    }
  }
</style>
